<!-- param form content -->
<div class="well dialog-well">

    <div class="widget-body no-padding">

        <form id="param-form" action="${ctx}/tools/param/save" method="post" class="smart-form">

            <fieldset>
                <div class="hide">
                    <input type="hidden" name="id"> 　
                </div>
                <div class="hide">
                    <input type="hidden" name="parent.id"> 　
                </div>

                <div class="row">
                    <section class="col col-6">
                        <label class="label">参数名称</label>
                        <label class="input state-disabled">
                            <i class="icon-append fa fa-book"></i>
                            <input type="text" name="label" placeholder="显示名称">
                            <b class="tooltip tooltip-bottom-right">参数的显示名称,必须设置</b>
                        </label>
                    </section>
                    <section class="col col-6">
                        <label class="label">组</label>
                        <label class="input state-disabled">
                            <i class="icon-append fa fa-newspaper-o"></i>
                            <input type="text" name="parentLabel" readonly="readonly">
                            <b class="tooltip tooltip-bottom-right">参数的组显示名称,不可修改</b>
                        </label>
                    </section>
                </div>
                <section>
                    <label class="label">值</label>
                    <label class="input state-disabled">
                        <i class="icon-append fa fa-info"></i>
                        <input type="text" name="value" placeholder="value">
                        <b class="tooltip tooltip-bottom-right">参数的配置值,必须设置</b>
                    </label>
                </section>
                <section>
                    <label class="label">参数Key</label>
                    <label class="input state-disabled">
                        <i class="icon-append fa fa-key"></i>
                        <input type="text" name="name" placeholder="key">
                        <b class="tooltip tooltip-bottom-right">参数的配置Key,一般用于调用,必须设置</b>
                    </label>
                </section>

                <section>
                    <label class="label">类型</label>
                    <label class="select" rel="tooltip" data-placement="bottom"
                           data-original-title="参数配置的类型">
                        <select name="type">
                            <option value="1">分类</option>
                            <option value="2">组</option>
                            <option selected value="3">具体配置</option>
                        </select><i></i>
                    </label>
                </section>

                <section>
                    <label class="label">图标</label>
                    <div id="icon-menu" style="height:32px;" class="bordered"></div>
                </section>

                <section>
                    <label class="label">排序</label>
                    <label class="input">
                        <i class="icon-append fa fa-sort-amount-asc"></i>
                        <input type="text" name="sort" placeholder="显示顺序">
                        <b class="tooltip tooltip-bottom-right">同类型的参数的显示顺序</b>
                    </label>
                </section>

                <section>
                    <label class="label">任务描述</label>
                    <label class="textarea">
                        <i class="icon-append fa fa-comment"></i>
                        <textarea rows="4" name="description"></textarea>
                    </label>
                </section>
                <section>
                    <label class="checkbox"><input type="checkbox" name="fixed" value="1">
                        <i></i>锁定参数,不允许进行修改</label>
                </section>
            </fieldset>
            <footer>
                <button type="submit" class="btn btn-primary">
                    <i class="fa fa-save"></i>
                    确定
                </button>
                <button type="button" class="btn btn-default" onclick="pageRedirct();">
                    <i class="fa fa-reply"></i>
                    取消
                </button>
            </footer>
        </form>

    </div>
</div>
<!-- end param form content -->

<script type="text/javascript">

    /* DO NOT REMOVE : GLOBAL FUNCTIONS!
     *
     * pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
     *
     * // activate tooltips
     * $("[rel=tooltip]").tooltip();
     *
     * // activate popovers
     * $("[rel=popover]").popover();
     *
     * // activate popovers with hover states
     * $("[rel=popover-hover]").popover({ trigger: "hover" });
     *
     * // activate inline charts
     * runAllCharts();
     *
     * // setup widgets
     * setup_widgets_desktop();
     *
     * // run form elements
     * runAllForms();
     *
     ********************************
     *
     * pageSetUp() is needed whenever you load a page.
     * It initializes and checks for all basic elements of the page
     * and makes rendering easier.
     *
     */
    pageSetUp();

    /*
     * ALL PAGE RELATED SCRIPTS CAN GO BELOW HERE
     */
    // PAGE RELATED SCRIPTS
    // pagefunction
    var pagefunction = function () {

        var $paramForm = $("#param-form");
        $paramForm.validate({
            // Rules for form validation
            rules: {
                // 为了不污染html代码,验证统一在js中
                name: {
                    required: true,
                    maxlength: 50
                },
                value: {
                    required: true,
                    maxlength: 512
                },
                label: {
                    required: true,
                    maxlength: 255
                },
                sort: {
                    required: true,
                    digits: true,
                    min: 1
                },
                icon: {
                    required: true
                },
                description: {
                    maxlength: 250
                }
            },

            // Messages for form validation,use default
            messages: {
                // 不覆盖使用默认js多语言文件
            },
            submitHandler: function (form) {
                // 遮罩
                var loadIndex = parent.layer.load(0, {shade: 0.4});

                $(form).ajaxSubmit({
                    dataType: "json",
                    success: function (data) {
                        parent.layer.close(loadIndex);

                        if (data && data.status == 'success') {
                            parent.messageBox(data.message, "success");
                            pageRedirct();
                        } else {
                            parent.messageBox(data.message, "error");
                        }
                        // 显示
                        parent.layer.closeAll('page');
                    },
                    error: function () {
                        parent.layer.close(loadIndex);
                        parent.messageBox("修改参数配置错误!", "error");
                    }
                });
                // always return false to prevent standard browser submit and page navigation
                return false;
            },
            // Do not change code below
            errorPlacement: function (error, element) {
                error.insertAfter(element.parent());
            }
        });

        // 如果是弹出框上的再次弹出,不能渲染到弹出框里面,只能新bind一个
        var menuIconSelect = new IconSelecter({
            databind: $('#icon-menu').get(0),
            // 对话框弹出对话框需要外部定义一个div
            databind_dialog: $('#menu-icon-dialog').get(0),
            title: '选择图标',
            name: 'icon',
            // 隐藏域值
            value: '',
            // 输入框值
            labelValue: ''
        });

        /**
         * 初始化form
         */
        function initForm() {
            var entity = JSON.parse('${entity}');
            $paramForm.find('input[name=id]').val(entity['id']);
            $paramForm.find('input[name="parent.id"]').val(entity['parentId']);
            $paramForm.find('input[name=parentLabel]').val(entity['parentLabel']);
            $paramForm.find('input[name=name]').val(entity['name']);
            $paramForm.find('input[name=label]').val(entity['label']);
            $paramForm.find('input[name=value]').val(entity['value']);
            $paramForm.find('input[name=sort]').val(entity['sort']);
            $paramForm.find('input[name=endDate]').val(entity['endDate']);
            $paramForm.find('textarea[name=description]').val(entity['description']);
            if (entity['fixed'] == 1) {
                $paramForm.find('input[name=fixed]').prop('checked', 'checked');
            }
            menuIconSelect.refresh({
                value: entity['icon'],
                labelValue: transIcon(entity['icon'])
            });
        }

        function transIcon(icon) {
            if (icon != null && icon != '') {
                return icon.substring(6);
            }
            return "无";
        }

        initForm();

        /**
         * 保存和取消之后页面到列表
         */
        function pageRedirct() {
            var treeObj = $.fn.zTree.getZTreeObj("paramTree");

            var node = treeObj.getNodeByParam("id", $paramForm.find('input[name="parent.id"]').val());
            if (node) {
                treeObj.reAsyncChildNodes(node, "refresh");
                treeObj.selectNode(node);
                $("#" + node.tId + "_a").click();
            }
        }
        // 注册
        window.pageRedirct = pageRedirct;
    };

    // destroy generated instances
    // pagedestroy is called automatically before loading a new page
    // only usable in AJAX version!
    var pagedestroy = function () {
        window.pageRedirct = undefined;
    };
    // end destroy

    // load related plugins
    loadScript("/static/js/extend/IconSelecter.js", function () {
        loadScript("/static/js/plugin/jquery-form/jquery.form.js", pagefunction);
    });

</script>